import React, { useState } from 'react'
import { render } from 'react-dom'
import KeepAlive, { AliveScope } from './keepAlive'
import BackHomeBtn from '../../components/backHome'
import styles from '../../components/backHome/index.module.less'
import { Link, withRouter } from 'react-router-dom'

function Counter() {
	const [count, setCount] = useState(0)
	return (
		<div>
			count: {count}
			<button onClick={() => setCount((count) => count + 1)}>add</button>
		</div>
	)
}

function App(props) {
	const { history } = props
	const [show, setShow] = useState(true)

	const backHome = () => {
		setShow((show) => !show)
		setTimeout(() => {
			history.push('/home')
		})
	}
	return (
		<div>
			<div>
				<div onClick={backHome} className={styles.toHomeBtn}>
					首页
				</div>
			</div>
			<button onClick={() => setShow((show) => !show)}>Toggle</button>
			<p>无 KeepAlive</p>
			{show && <Counter />}
			<p>有 KeepAlive</p>
			{show && (
				<KeepAlive id="Test">
					<Counter />
				</KeepAlive>
			)}
			{show && (
				<KeepAlive id="Test1">
					<Counter />
				</KeepAlive>
			)}
		</div>
	)
}

export default withRouter(App)

// render(<App />, document.getElementById("root"));
